﻿@page "/docs/extensions/selectlist"

<Seo Canonical="/docs/extensions/selectlist" Title="Blazorise SelectList" Description="Learn to use and work with the Blazorise SelectList component, which allows you to select a value from a list of predefined items." />

<DocsPageTitle Path="Extensions/SelectList">
    Blazorise SelectList component
</DocsPageTitle>

<DocsPageLead>
    The <Code>SelectList</Code> component allows you to select a value from a list of predefined items.
</DocsPageLead>

<DocsPageParagraph>
    To be able to use <Code>SelectList</Code> component you first need to install it.
</DocsPageParagraph>

<DocsPageSubtitle>
    Installation
</DocsPageSubtitle>

<Alert Color="Color.Info" Visible>
    <AlertDescription>
        The SelectList extension is part of the <Code>Blazorise.Components</Code> NuGet package.
    </AlertDescription>
</Alert>

<DocsPageSection>
    <DocsPageSectionHeader Title="NuGet">
        Install extension from NuGet.
    </DocsPageSectionHeader>
    <DocsPageSectionSource Code="ComponentsNugetInstallExample"></DocsPageSectionSource>
</DocsPageSection>

<DocsPageSubtitle>
    Examples
</DocsPageSubtitle>

<DocsPageSection>
    <DocsPageSectionHeader Title="Basic Example">
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined FullWidth>
        <SelectListExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="SelectListExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="With Multiple Selections">
        Just like with a regular <Code Tag>Select</Code> component, add the <Code>Multiple</Code> parameter to allow more than one option to be selected. Also, bind the <Code>SelectedValues</Code> parameter.
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined FullWidth>
        <SelectListMultipleExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="SelectListMultipleExample" />
</DocsPageSection>

<ComponentApiDocs ComponentTypes="[typeof(SelectList<,>)]" />